<template>
  <div>
    <DocHeader
      :title="title"
      fromDoc="difficultConsultation"
      :diagnosis="true"
    ></DocHeader>
    <div class="docMain">
      <div>病史摘要及主要护理问题：</div>
      <div>
        <div v-if="type === '打印'" style="line-height: 1.7em">
          {{ pageData.mainProblem }}
        </div>
        <el-input
          v-else
          v-model="pageData.mainProblem"
          class="textarea"
          resize="none"
          type="textarea"
        ></el-input>
      </div>
      <div>会诊目的：</div>
      <div>
        <el-checkbox-group v-model="pageData.purpose">
          <el-checkbox label="解决护理问题"></el-checkbox>
          <el-checkbox label="技术操作"></el-checkbox>
          <el-checkbox label="技术指导"></el-checkbox>
          <el-checkbox label="宣教咨询"></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="signBox">
        责任护士签名：
        <div class="signInput">
          <img
            v-if="signPhoto(pageData.nurseSign, 'nursingDocument', docType)"
            :src="
              'data:image/png;base64,' +
              signPhoto(pageData.nurseSign, 'nursingDocument', docType)
            "
            alt=""
            style="display: block; max-width: 98%; height: 24px"
            @click="handleSignImgClear('nurseSign')"
          />
          <el-input
            v-else
            v-model="pageData.nurseSign"
            class="signInput"
            @blur="handleSignInputBlur('nurseSign')"
          ></el-input>
        </div>
      </div>
      <div class="signBox">
        护士长签名：
        <div class="signInput">
          <img
            v-if="
              signPhoto(pageData.nurseLeaderSign, 'nursingDocument', docType)
            "
            :src="
              'data:image/png;base64,' +
              signPhoto(pageData.nurseLeaderSign, 'nursingDocument', docType)
            "
            alt=""
            style="display: block; max-width: 98%; height: 24px"
            @click="handleSignImgClear('nurseLeaderSign')"
          />
          <el-input
            v-else
            v-model="pageData.nurseLeaderSign"
            class="signInput"
            @blur="handleSignInputBlur('nurseLeaderSign')"
          ></el-input>
        </div>
      </div>
      <div class="signBox">
        申请科室：
        <el-input
          v-model="pageData.department"
          class="signInput"
          style="margin-right: 20px; width: 200px"
        ></el-input>
        日期：
        <DateSelection
          v-model="pageData.date1"
          value-format="yyyy-MM-dd HH:mm"
          :simple-op="true"
          :date-picker-show="true"
          :date-show="true"
          :no-clear="true"
          :hasBorder="false"
          :needTimeIcon="false"
          :display-num="!pageData.date1"
          style="padding: 0; width: 150px"
        />
      </div>
      <div class="line"></div>
      <div>会诊意见：</div>
      <div>
        <div v-if="type === '打印'" style="line-height: 1.6em">
          {{ pageData.advice }}
        </div>
        <el-input
          v-else
          v-model="pageData.advice"
          class="textarea"
          resize="none"
          type="textarea"
        ></el-input>
      </div>
      <div class="signBox">
        会诊者：
        <div class="signInput">
          <img
            v-if="signPhoto(pageData.doctorSign, 'nursingDocument', docType)"
            :src="
              'data:image/png;base64,' +
              signPhoto(pageData.doctorSign, 'nursingDocument', docType)
            "
            alt=""
            style="display: block; max-width: 98%; height: 24px"
            @click="handleSignImgClear('doctorSign')"
          />
          <el-input
            v-else
            v-model="pageData.doctorSign"
            class="signInput"
            @blur="handleSignInputBlur('doctorSign')"
          ></el-input>
        </div>
      </div>
      <div class="signBox">
        会诊时间：
        <DateSelection
          v-model="pageData.date2"
          value-format="yyyy-MM-dd HH:mm"
          :simple-op="true"
          :date-picker-show="true"
          :date-show="true"
          :no-clear="true"
          :hasBorder="false"
          :needTimeIcon="false"
          :display-num="!pageData.date2"
          style="padding: 0; width: 150px"
        />
      </div>
      <div class="line"></div>
      <div>
        对会诊人员的满意度：
        <el-radio-group v-model="pageData.satisfactionLevel">
          <el-radio label="非常满意">非常满意</el-radio>
          <el-radio label="满意">满意</el-radio>
          <el-radio label="基本满意">基本满意</el-radio>
          <el-radio label="不满意">不满意</el-radio>
        </el-radio-group>
      </div>
      <div class="signBox">
        会诊科室签名:
        <div class="signInput">
          <img
            v-if="
              signPhoto(pageData.departmentSign, 'nursingDocument', docType)
            "
            :src="
              'data:image/png;base64,' +
              signPhoto(pageData.departmentSign, 'nursingDocument', docType)
            "
            alt=""
            style="display: block; max-width: 98%; height: 24px"
            @click="handleSignImgClear('departmentSign')"
          />
          <el-input
            v-else
            v-model="pageData.departmentSign"
            class="signInput"
            @blur="handleSignInputBlur('departmentSign')"
          ></el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash-unified'
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import { useSign } from '@/hooks'
import { getStoreFromInstance } from '@/utils/instance'

import DocHeader from '../DocHeader.vue'
import { form } from './baseData'

export default defineComponent({
  components: {
    DocHeader,
    DateSelection
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    docType: {
      type: [String, Number],
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      hospitalName: window.hospitalName,
      pageData: cloneDeep(form)
    })
    console.log(props.type)
    const store = getStoreFromInstance()

    const { signPhoto, queryUserSignByName } = useSign()

    const user = computed(() => store.getters.user)

    function initData() {
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        state.pageData = Object.assign(cloneDeep(form), jsonText)
      } else {
        nextTick(() => {
          const pageData = cloneDeep(form)
          pageData.nurseSign = user.value.name
          queryUserSignByName(
            [user.value.name],
            'nursingDocument',
            props.docType
          )
          state.pageData = pageData
        })
      }
    }

    function getParams() {
      return state.pageData
    }

    function handleSignInputBlur(key) {
      queryUserSignByName(
        [state.pageData[key]],
        'nursingDocument',
        props.docType
      )
    }

    function handleSignImgClear(key) {
      state.pageData[key] = ''
    }

    onMounted(() => {
      initData()
    })

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    return {
      ...toRefs(state),
      signPhoto,
      getParams,
      handleSignInputBlur,
      handleSignImgClear
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
@import '@/views/doc/styles/doc-fix.scss';

.docMain {
  line-height: 2em;
  margin-top: 10px;
}

.signBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 6px;

  .signInput {
    width: 150px;
  }
}

.line {
  border-top: 1px solid;
  margin: 20px 0;
}

::v-deep {
  .el-input .el-input__inner {
    border: none;
    border-radius: 0;
    text-align: left;
    padding: 0 4px;
    color: #000;
    font-size: 14px;
  }

  .textarea {
    .el-textarea__inner {
      border: none;
      height: 230px;
      padding: 0;
      font-size: 14px;
      color: #333;
    }
  }
}
</style>
